<template>
  <base-layout>
    <template #searchPanel>
      <search-panel
        v-slot="{ form }"
        :addPer="authConfig.add"
        :selectPer="authConfig.query"
        addTitle="新增配件"
        @insert="add"
        @search="search"
        :showSearchButton="true"
        :showAddButton="true"
      >
        <job-shop v-model="form.storeId" placeholder="所属门店" />
        <el-select clearable style="width: 200px" v-model="form.partsDictId" placeholder="配件类别">
          <el-option
            v-for="item in dict['汽车配件类型']"
            :key="item.id"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-input v-model="form.partsName" clearable placeholder="配件名称" style="width: 200px" />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{row}">
          <i class="el-icon-edit" title="编辑" style="cursor: pointer;" v-permission="authConfig.edit" @click="handleDataUpdateEdit(row, '编辑')"></i>
          <i class="el-icon-delete" title="删除" style="color:red; margin-left: 20px;cursor: pointer" v-permission="authConfig.del" @click="handleDataUpdateEdit(row)"></i>
        </template>
      </data-table>
    </template>
  </base-layout>
</template>
<script>
import {
    dataList,
    dicts,
    details,
    addData,
    updateData,
    deleteData,
  } from  '@/api/after-sale/systemManage/accessories'
import baseMixin from '@/mixins/base';
import { getDict } from '@/utils/index'
export default {
  mixins: [
    baseMixin({
      findData: dataList,
      addData: addData,
      deleteData: deleteData,
      dataName: ['content', 'totalRecords'],
      isAdd: false,
      findDataById: details,
      updateData: updateData,
      idName: 'id',
    })
  ],
  data() {
    return {
      authConfig: {
        query: 'carParts:page',
        add: 'carParts:create',
        edit: 'carParts:update',
        del: 'carParts:delete',
      },
      tableColumnAttributes: [
        { name: '配件所属门店', value: 'storeName', type: 'text' },
        { name: '配件名称', value: 'partsName', type: 'text' },
        { name: '配件编号', value: 'partsCode', type: 'text' },
        { name: '配件类别', value: 'partsDictValue', type: 'text' },
        { name: '配件供应商', value: 'supplierName', type: 'text' },
        { name: '配件单位', value: 'unit', type: 'text' },
        { name: '创建时间', value: 'createTime', type: 'text' },
      ],
      dict: {},
      types: [
        { id: '1', value: '测试收支种类1' },
        { id: '2', value: '测试收支种类2' }
      ]
    }
  },
  created() {
    this.dict = getDict(['汽车配件类型'])
  },
  methods:{
    search(form) {
      this.searchOptions = {
        partsDictId: form.partsDictId,
        storeId: form.storeId,
        partsName: form.partsName
      }
      this.currentPage = 1
      this.setTableData()
    },
    add(){
      this.$router.push({ path: '/systemManage/addAccessories' })
    },
    handleDataUpdateEdit(row){
      this.$router.push({ path: '/systemManage/editAccessories', query: { id: row.id } });
    }
  }
}
</script>
